<template>
  <div>
      <!-- 头部查询区域 -->
      <headline>
            <template slot="title">待办中心</template>
            <template slot="inquire">
               <div class="table-page-search-wrapper">
            <a-form layout="inline">
              <a-row :gutter="48">
                
                <a-col :md="8" :sm="24">
                  <a-form-item label="流程状态">
                    <a-select v-model="queryParam.status" placeholder="请选择" default-value="0">
                      <a-select-option value="0">全部</a-select-option>
                      <a-select-option value="1">关闭</a-select-option>
                      <a-select-option value="2">运行中</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :md="8" :sm="24">
                  <a-form-item label="规则编号">
                    <a-input v-model="queryParam.id" placeholder=""/>
                  </a-form-item>
                </a-col>
                <a-col :md="8" :sm="24">
                  <span class="table-page-search-submitButtons" :style=" { float: 'right', overflow: 'hidden' } || {} ">
                    <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                  </span>
                </a-col>
              </a-row>
            </a-form>
          </div>
            </template>
      </headline>
      
      <navigation-card :tabList="tabList" v-on:onTabChange="flageShowFn">
      </navigation-card>

        <a-card :bordered="false">
          <!-- 底部表格区域 -->
          <a-table v-if="flageShow==='tab1'" :columns="columns" :data-source="data" >
          <a slot="name" slot-scope="text">{{ text }}</a>
          <span slot="customTitle">操作</span>
          <span slot="tags" slot-scope="tags">
            <a-tag
              v-for="tag in tags"
              :key="tag"
              :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
            >
              {{ tag.toUpperCase() }}
            </a-tag>
          </span>
          </a-table>
        </a-card>
  </div>
</template>

<script>
//表格中表头模拟数据
const columns = [
  {
    dataIndex: 'name',
    key: 'name',
    slots: { title: 'customTitle' },
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '流程名称',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '流程状态',
    dataIndex: 'address',
    key: 'address1',
  },
  {
    title: '所属项目',
    dataIndex: 'tags',
    key: 'tags1',
  },
  {
    title: '流程发起人',
    dataIndex: 'tags',
    key: 'action2',
  },
  {
    title: '当前审批人',
    dataIndex: 'tags',
    key: 'action3',
  },
  {
    title: '角色',
    dataIndex: 'tags',
    key: 'action4',
  },
  {
    title: '到达时间',
    dataIndex: 'tags',
    key: 'action5',
  },
];
//表格中用户模拟数据
const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
  {
    key: '4',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
  {
    key: '5',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
  {
    key: '6',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
  {
    key: '72',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
  {
    key: '8',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
  {
    key: '9',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
  {
    key: '10',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
  {
    key: '11',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
  {
    key: '12',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
];
import Headline from '../headline/Headline.vue'
import NavigationCard from '../navigationcard/index.vue'
export default {
  name: 'TableList',
  components:{
    Headline,NavigationCard
  },
  data () {
    return {
      // 查询参数
      queryParam: {},
      data,
      columns,
      //判定二级菜单显示内容的数据
      flageShow:'tab1',
      //二级菜单表头数据
      tabList: [
        {
          key: 'tab1',
          tab: '需求管理',
          scopedSlots: { tab: 'customRender' },
        },
        {
          key: 'tab2',
          tab: '产品型谱管理',
        },
        {
          key: 'tab3',
          tab: 'PLM流程待办',
        },
        {
          key: 'tab4',
          tab: 'PLM任务待办',
        }
                  ]
    }
  },
  filters: {
  },
  created () {
  },
  computed: {
  },
  methods: {
    flageShowFn(flageShow){
                this.flageShow=flageShow
                console.log(flageShow);
            }
  },
  edit() {
        // axios 发送数据到后端 修改数据成功后
        // 调用 refresh() 重新加载列表数据
        // 这里 setTimeout 模拟发起请求的网络延迟..
        setTimeout(() => {
          this.$refs.table.refresh() // refresh() 不传参默认值 false 不刷新到分页第一页
        }, 1500)

      }
}
</script>
<style lang="less" scoped>
form .ant-select{
    width: 187px;
}
</style>